<script setup lang="ts">
// 引入Vue的ref函数，用于创建响应式引用
import {ref} from 'vue'

// 初始化一个名为totalNum的响应式引用，初始值为0，用于记录计数结果
const totalNum = ref(0)
// 打印初始的totalNum值，主要用于调试目的
console.log(totalNum)  

/**
 * 增加计数函数，用于在按钮点击时增加totalNum的值
 */
const addCount = ()=>{
  // 增加totalNum的值
  totalNum.value++
}

/**
 * 减少计数函数，用于在按钮点击时减少totalNum的值
 */
const descCount = ()=>{
  // 减少totalNum的值
  totalNum.value--
}

</script>

<!-- 在模板中展示totalNum的当前值，并提供按钮来调用addCount和descCount函数 -->
<template>
  <!-- 显示当前totalNum的值 -->
  <p style="font-size: 100px;">{{ totalNum }}</p>
  <!-- 点击时调用addCount函数，增加totalNum的值 -->
  <button @click="addCount">+</button>
  <!-- 点击时调用descCount函数，减少totalNum的值 -->
  <button @click="descCount">-</button>
</template>
<style scoped>
  
</style>

